<template>
	<view style="background-color: #f3f4f5;" class="">
		<u-navbar :is-back="true" title="填写基础资料" back-icon-color="#FFFFFF" title-color="white" :background="background"
			:border-bottom="false">
		</u-navbar>
		<!-- 	<uni-file-picker
			v-model="imageValue" 
			fileMediatype="image" 
			mode="grid" 
			@select="select" 
			@progress="progress" 
			@success="success" 
			@fail="fail" 
		/> -->
		<!-- <view class="" style="background-color: #00a8ff;color: #FFFFFF;">
			<u-steps :list="[{
						name: '基础信息'
					}, {
						name: '实名认证'
					}, {
						name: '资质认证'
					}]" :current="1" mode="number" active-color="#FFFFFF"></u-steps>
		</view> -->

		<u-row gutter="16" class="u-p-15 u-font-12" style="background-color: #00a8ff;color: #bcdeff;">
			<u-col span="4">
				<view class="demo-layout bg-purple" style="text-align: center;">
					<image style="width: 25rpx;height: 25rpx;" class="u-m-r-16"
						src="../../../static/index/zzrz/topd.png"></image>
					<span style="color: #bcdeff;">基础信息</span>
				</view>
			</u-col>
			<u-col span="4">
				<view class="demo-layout bg-purple" style="text-align: center;">
					<image style="width: 25rpx;height: 25rpx;" class="u-m-r-16"
						src="../../../static/index/zzrz/topd.png"></image>
					<span style="color: #bcdeff;">实名认证</span>
				</view>
			</u-col>
			<u-col span="4">
				<view class="demo-layout bg-purple" style="text-align: center;">
					<image style="width: 25rpx;height: 25rpx;" class="u-m-r-16"
						src="../../../static/index/zzrz/topd.png"></image>
					<span style="color: #bcdeff;">资质认证</span>
				</view>
			</u-col>
		</u-row>
		<!-- <u-steps :list="numList" mode="number" type="success" :current="0"
			style="background-color: #00a8ff;color: #bcdeff;"></u-steps> -->
		<view class="u-p-15 u-font-12" style="background-color: #f3f4f5;color: #b2b2b2;">
			以下信息为医生认证必填信息，请认真填写
		</view>

		<u-cell-group class="u-m-b-26">
			<view class="u-padding-26">
				<image class="u-avatar-demo" :src="avatar" mode="aspectFill"></image>
				<!-- 进入裁剪页面 -->
				<!-- <u-cell-item value="点击上传头像" ></u-cell-item> -->
				<p @click='upload()' @tap="chooseAvatar" style="color: #c0c4cc;float: right;line-height: 100rpx;">点击上传头像
				</p>
			</view>
		</u-cell-group>
		<u-cell-group class="u-m-b-26 u-p-l-26 u-p-r-26" style="background-color: #FFFFFF;">
			<u-cell-item title="姓名" :arrow="false">
				<input type="text" placeholder="请输入真实姓名(不超过15个字符)"
					placeholder-style="text-align: right;font-size: 24rpx;" v-model="nickname" style="" />
			</u-cell-item>
			<u-cell-item title="性别" :arrow="false">
				<u-radio-group v-model="value">
					<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name"
						:disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</u-cell-item>
			<u-cell-item title="联系电话" :arrow="false">
				<input type="number" placeholder="请输入联系手机号" placeholder-style="text-align: right;font-size: 24rpx;"
					v-model="phone" style="" />
				<!-- <view class="" v-if="!this.$u.test.mobile(phone)">
					请输入正常手机号
				</view> -->
			</u-cell-item>
		</u-cell-group>
		<u-cell-group class="u-m-b-26 u-p-l-26 u-p-r-26" style="background-color: #FFFFFF;">
			<u-cell-item title="执业机构"
				@click="openinfo('/pages/qualification/qualification1/ProfessionalInstitutions/ProfessionalInstitutions')"
				value="填写"></u-cell-item>
			<u-cell-item title="当前职称" :value="title" @click="pickerShow()"></u-cell-item>
			<!-- 弹出picker职称 -->
			<u-picker v-model="atShow" title="选择职称" mode="selector" :default-selector="[2]" :range="selector"
				@confirm="confirmSelector"></u-picker>
			<u-cell-item title="从业时间" @click="pickerTimeShow()" :value="time"></u-cell-item>
			<!-- 弹出picker时间 -->
			<u-picker v-model="showTime" title="选择日期" mode="time" @confirm="confirmTime" :params="params"></u-picker>
			<u-cell-item title="擅长项目" value="最多选择三个"
				@click="openinfo('/pages/qualification/qualification1/GoodAtProject/GoodAtProject')"></u-cell-item>
		</u-cell-group>
		<u-cell-group class="u-m-b-26 u-p-l-26 u-p-r-26" style="background-color: #FFFFFF;">
			<u-cell-item title="医生简介" :arrow="false">
				<input type="text" placeholder="填写" placeholder-style="text-align: right;font-size: 24rpx;"
					v-model="description" style="" />
			</u-cell-item>
			<u-cell-item title="擅长项目简介" :arrow="false">
				<input type="text" placeholder="填写" placeholder-style="text-align: right;font-size: 24rpx;"
					v-model="selfthing" style="" />
			</u-cell-item>
		</u-cell-group>
		<u-button type="primary" style="width: 90%;margin: 26px auto;" @click="next()">下一步</u-button>
	</view>
</template>

<script>
	import {
		ossAccessid,
		ossHost,
		ossSignature,
		ossPolicyBase64
	} from "@/common/ossUploadfile.js"
	export default {
		// 监听页面加载
		onLoad() {
			console.log("页面加载事件，获取职称列表")
			// 获取职称列表
			this.$apiBasics.position().then((res) => {
				console.log('request success', res);
				// 获取的数据
				this.titleList = res.data.data;
				for (let index in this.titleList) {
					this.selector.push(this.titleList[index].name);
				}
			}).catch((err) => {
				console.log('request fail', err);
			})
		},
		onShow() {},
		data() {
			return {
				numList: [{
					name: '基础信息'
				}, {
					name: '实名认证'
				}, {
					name: '资质认证'
				}],
				fileList: [{
					url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
				}],
				// 当前职称选择
				atShow: false,
				// 职称 选择的  从业时间
				title: '选择职称',
				time: '请选择开始从业时间',
				// 职称列表
				selector: [],
				// 接口数据，职称列表
				titleList: [],

				showTime: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},

				background: {
					backgroundColor: '#00a8ff',
				},
				list: [{
						name: '女士',
						disabled: false
					},
					{
						name: '男士',
						disabled: false
					}
				],
				value: 'orange',
				// 头像地址
				avatar: '',
				// 真实姓名
				nickname: '',
				// 手机号
				phone: '',
				// 执业机构名称
				workingagency: '',

				sex: '',
				// 执业机构地区
				workingagency_area: '',
				// 执业机构详细地址
				workingagency_address: '',
				// 职称
				positions_id: '',
				// 执业开始时间
				workingtime: '',
				// 擅长项目ID
				collection_ids: '',
				// 简介 
				description: '',
				selfthing: ''

			}
		},
		created() {
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				console.log(path)
				this.avatar = path;
				console.log(path);
				// 获取当前时间戳
				let timestamp = (new Date()).valueOf();
				let nameStr = "test1/" + timestamp + "/" + path;
				console.log(nameStr);

				// 头像地址
				this.avatar = nameStr;

				uni.uploadFile({
					url: ossHost,
					filePath: path,
					fileType: "image",
					name: 'file',
					formData: {
						"key": nameStr,
						'OSSAccessKeyId': ossAccessid,
						'policy': ossPolicyBase64,
						'signature': ossSignature,
						'success_action_status': 200
					},
					header: {},
					complete: (res) => {
						console.log(res);
						console.log("头像上传")
					},
					success: obsRes => {
						uni.hideLoading();
						console.log(obsRes);
						if (obsRes.statusCode == 200) {
							uni.showToast({
								title: "图片上传成功",
								duration: 800
							})
						} else {
							uni.showToast({
								title: "上传失败,请检查网络或服务器",
								icon: "none",
							})
						}
					},
					fail: err => {
						console.log("报错")
						uni.hideLoading()
						uni.showToast({
							title: "网络错误请检查," + JSON.stringify(err),
							icon: "none",
							duration: 4000
						})
					},
				});
			});
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				console.log(e);
				if (e == "女士") {
					this.sex = 0;
				} else if (e == "男士") {
					this.sex = 1;
				}
			},
			// 选择职称
			pickerShow() {
				this.atShow = true;
			},
			// 选择时间
			pickerTimeShow() {
				this.showTime = true;
			},
			confirmTime(e) {
				this.time = e.year + "年" + e.month + "月" + e.day + "日"
				console.log("时间戳");
				// this.workingtime = 
				// 传入上个月时间戳
				let dt = e.year + "-" + e.month + "-" + e.day + " " + "00:00";
				var timestamp1 = (new Date(dt)).getTime() / 1000
				console.log("时间戳:", timestamp1);
				console.log("日期:", dt);
				this.workingtime = timestamp1;
			},
			confirmSelector(e) {
				console.log(e);

				this.positions_id = parseInt(e) + 1;
				this.title = this.selector[e];
			},
			// 上传头像
			upload() {
				console.log(1)
			},

			// ss
			next() {
				console.log(":点击了下一步 ");

				if (this.avatar == '') {
					uni.showToast({
						title: "请上传头像"
					})
					return;
				} else if (this.nickname == '') {
					uni.showToast({
						title: "请上传头像"
					})
					return;
				} else if (this.positions_id == '') {
					uni.showToast({
						title: "请选择职称"
					})
					return;
				} else {
					// 执业机构  名称地址 详细地址
					this.workingagency = uni.getStorageSync('value1');
					this.workingagency_address = uni.getStorageSync('input');
					this.workingagency_area = uni.getStorageSync('value2'); // 获取 头像地址

					// 擅长项目 ids
					this.collection_ids = uni.getStorageSync('ids');
					// 头像地址
					uni.setStorageSync('avatar', this.avatar);
					// 真实姓名
					uni.setStorageSync('nickname', this.nickname);
					// 职称
					uni.setStorageSync('positions_id', this.positions_id);
					// 执业开始时间
					uni.setStorageSync('workingtime', this.workingtime);
					// 擅长项目
					uni.setStorageSync('collection_ids', this.collection_ids);
					// 个人简介
					uni.setStorageSync('description', this.description);
					// 擅长简介
					uni.setStorageSync('selfthing', this.selfthing);

					uni.setStorageSync('sex', this.sex);

					uni.setStorageSync('phone', this.phone)

					console.log("头像地址: " + this.avatar);
					console.log("真实姓名：" + this.nickname);
					console.log("执业机构名称：" + this.workingagency);
					console.log("执业机构地区：" + this.workingagency_area);
					console.log("执业机构详细地址：" + this.workingagency_address);
					console.log("职称：" + this.positions_id);
					console.log("执业开始时间：" + this.workingtime);
					console.log("擅长项目ID:" + this.collection_ids);
					console.log("个人简介" + this.description)
					this.openinfo('/pages/qualification/qualification2/qualification2');
				}
			},
			openinfo(url) {
				uni.navigateTo({
					url: url,
				});
			},
			chooseAvatar() {
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 40rpx;
	}

	.u-avatar-wrap {
		margin-top: 80rpx;
		overflow: hidden;
		margin-bottom: 80rpx;
		text-align: center;
	}

	.u-avatar-demo {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
</style>
